<template>
  <view class="myPage">
    <common-header :isCanBack="true" :titleName="title" :className="headerClassName"></common-header>
    <view class="container">
      <image class="top-img" mode="scaleToFill" :src="url + detail.coverImgPath"></image>
      <view class="details">
        <text class="title">{{ detail.title }}</text>
        <view class="position" :style="{backgroundImage: `url(${url}/statics/std/static/introduction-detail-position-bg.png)`}" v-if="detail.latitude && detail.longitude">
          <view class="left">
            <text>交通指南</text>
            <text>多种交通方式直达景区</text>
          </view>
          <view class="right" @click="goToMap">
            <image :src="`${url}/statics/std/static/new/introduction-detail-position-location.png`"></image>
            <text>查看</text>
          </view>
        </view>
        <view class="discription richText">
          <mp-html :content="detail.articleText || ''" style="font-size: 28rpx; color: #4d4d4d; line-height: 48rpx; font-weight: 400;"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import commonHeader from '@/components/commonHeader.vue';
  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
  import { requestGet } from '@/utils/request.js';
  const img_url = process.env.VUE_APP_BASEURL_IMG_API;
  export default {
    components: {commonHeader,mpHtml},
    data() {
      return {
        headerClassName: '',
        detail: null,
        url: img_url,
        title: ""
      };
    },
    onLoad: function (options) {
      const id = options.id;
      if (id) {
        this.id = id;
        this.getDetail();
      }
      if(options.from === 'guide_detail'){
        this.title = "景点详情"
      }
    },
    methods: {
      onPageScroll(e){
        if(e.scrollTop > 100){
          this.headerClassName = 'headerClass';
        }else{
          this.headerClassName = '';
        }
      },
      getDetail() {
        requestGet(`/home/content/detail/${this.id}`,{}, '/baseplatform')
          .then((res) => {
            if (res.code === 200) {
              res.data.articleText = res.data && res.data.articleText ? res.data.articleText.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
              this.detail = res.data || {};
            }
          })
          .catch((err) => console.log("错误了", err));
      },
      goToMap(){
        const detail = this.detail;
        uni.openLocation({
        			latitude: Number(detail.latitude),
        			longitude: Number(detail.longitude),
              name: detail.placeName || detail.title,
              address: detail.placeName || detail.introduction,
        			success: function () {
        				console.log('success');
        			},
              fail: function (res) {
                console.log('fail', res);
              }
        		});
      }
    },
  };
</script>

<style lang="scss" scoped>
  .myPage{
    height: 100%;
    width: 100%;
    position: relative;
    .container{
      height: 100%;
      width: 100%;
      .top-img{
        height: 750rpx;
        width: 100%;
      }
      .details{
        position: relative;
        top: -240rpx;
        height: auto;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding: 0 40rpx;
        .title{
          display: inline-block;
          font-size: 48rpx;
          font-weight: 700;
          color: rgba(0,0,0,0.8);
          line-height: 68rpx;
          margin: 48rpx 0;
        }
        .position{
          width: 670rpx;
          height: 120rpx;
          // background: url(https://ltjtjingquguanli.com/statics/std/static/introduction-detail-position-bg.png);
          background-size: 100% 100%;
          background-repeat: no-repeat;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .left{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-left: 24rpx;
            text:first-child{
              font-size: 32rpx;
              font-weight: 700;
              color: #5F6F86;
              line-height: 48rpx;
              margin-bottom: 8rpx;
            }
            text:last-child{
              font-size: 24rpx;
              font-weight: 400;
              color: #777F8F;
              line-height: 32rpx;
            }
          }
          .right{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-right: 32rpx;
            width: 144rpx;
            height: 64rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            image{
              height: 32rpx;
              width: 32rpx;
              margin-right: 8rpx;
            }
            text{
              font-size: 28rpx;
              font-weight: 400;
              color: #2187FF;
              line-height: 32rpx;
            }
          }
        }
        .discription{
          width: 100%;
          height: auto;
          margin: 48rpx 0;
        }
      }
    }
  }
</style>